Skip to content

feat(useMeasure): support custom measurers in order to support border-box and others#1603

Merged
xobotyi merged 1 commit into
react-hookz:masterfrom
m-kolomoyets:feat/use-measure-matcher
Jul 25, 2026
Merged

feat(useMeasure): support custom measurers in order to support border-box and others#1603
xobotyi merged 1 commit into
react-hookz:masterfrom
m-kolomoyets:feat/use-measure-matcher

Conversation

@m-kolomoyets

Copy link
Copy Markdown
Contributor

What is the current behavior, and the steps to reproduce the issue?

Current implementation of the useMeasure hook calculates the element bounds based on content-box model only.

It is a little unexpected behavior when the project and all the layout is based on border-box model and trying to calculate measures of the element has paddings.

Thus, current hook ignores paddings calculating element's width and height.

What is the expected behavior?

Giving the possibility to define custom measure matcher model to take the values needed.

How does this PR fix the problem?

By adding the additional optional function argument receives the ResizeObserverEntry value and returns the new measures should be applied or null. If function returns null, the default behavior is applied and content-box measures will be returned.

Checklist

  • Have you read contribution guideline?
  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Is there an existing issue for this PR?
  • Have the files been linted and formatted?
  • Have the docs been updated to match the changes in the PR?
  • Have the tests been updated to match the changes in the PR?
  • Have you run the tests locally to confirm they pass?

Comment thread src/useMeasure/__docs__/story.mdx Outdated
Comment thread src/useMeasure/index.ts Outdated
@xobotyi

xobotyi commented Jan 30, 2025

Copy link
Copy Markdown
Contributor

Thanks for contribution!

@m-kolomoyets
m-kolomoyets requested a review from xobotyi January 30, 2025 14:51

@xobotyi xobotyi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@xobotyi xobotyi changed the title feat(useMeasure): extend hook with optional ResizeObserverEntry matcher callback feat(useMeasure): support custom measurers in order to support border-box and others Jan 30, 2025
@codecov

codecov Bot commented Jan 30, 2025

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.01%. Comparing base (7f48eb5) to head (ef74bf4).
⚠️ Report is 2 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #1603      +/-   ##
==========================================
+ Coverage   82.97%   83.01%   +0.04%     
==========================================
  Files          62       62              
  Lines         828      830       +2     
  Branches      151      151              
==========================================
+ Hits          687      689       +2     
  Misses         16       16              
  Partials      125      125              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Measures came from the content box only, so consumers laying out in
border-box read sizes without paddings and borders. A second parameter
takes a measurer deriving `Measures` from the observer entry:
`contentBoxMeasurer` stays the default, `borderBoxMeasurer` ships next
to it for opt-in border-box sizing.

Re-measurement still rides on the shared observer's default box, so a
padding-only change that leaves the content box intact emits no new
measurement.

Closes: react-hookz#1548
@xobotyi
xobotyi force-pushed the feat/use-measure-matcher branch from 34b5df0 to ef74bf4 Compare July 25, 2026 22:35
@xobotyi
xobotyi merged commit 61a0506 into react-hookz:master Jul 25, 2026
4 checks passed
@xobotyi

xobotyi commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 25.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Development

Successfully merging this pull request may close these issues.

2 participants